<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学成在线教育平台-不是每个网站都叫学成在线</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 首页文件 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 制作自己的ico图标  利用转换工具 把 png 转换为ico格式 bitbug -->
    <link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
<!--h5语义化标签 header-->
<header>
    <!-- logo -->
    <div class="logo">
        <h1>
            <a href="#" title="学成在线教育平台">学成在线</a>
        </h1>
    </div>
    <!-- nav部分 -->
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
    </nav>

    <!-- search -->
    <div class="search">
        <input type="search" name="" placeholder="请输入关键字">
        <button></button>
    </div>
    <!-- 个人中心 -->
    <div class="personal">
        <dl>
            <dt>个人中心</dt>
            <dd>
                <s>
                    <img src="images/ld.png" height="16" width="14" alt="">
                </s>
                <span>
						<img src="images/pic.png" height="33" width="33" alt="">
						刘德华 huazai
					</span>
            </dd>
        </dl>
    </div>
</header>
<!--banner部分-->
<div class="banner">
    <div class="w inner">
        <ul>
            <li><a href="#"><img src="images/banner.jpg"></a></li>
        </ul>
        <!-- 侧边栏 -->
        <div class="subnav">
            <ul>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
                <li><a href="#">前端开发 <span> > </span></a></li>
            </ul>
        </div>

        <!-- 小圆点 -->
        <div class="circle">
            <i class="current"></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <!-- 课程表 -->
        <div class="timebook">
            <dl>
                <dt>我的课程表</dt>
                <dd>
                    <ul>
                        <li>
                            <h5>继续学习 程序语言设计</h5>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h5>继续学习 程序语言设计</h5>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h5>继续学习 程序语言设计</h5>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a href="#" class="all">全部课程</a>
                </dd>
            </dl>
        </div>
    </div>
</div>

<!-- 精品推荐 -->
<div class="recommend w">
    <div class="rec-l">
        <strong>精品推荐</strong>|
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
        <a href="#">jQuery</a> |
    </div>
    <em>修改兴趣</em>
</div>

<!-- 精品产品 -->
<div class="products w">
    <!--    精品头部-->
    <div class="pro-hd">
        <h4>精品推荐</h4>
        <a href="#">查看全部</a>
    </div>
    <!--    精品内容-->
    <div class="pro-bd clearfix">
        <ul>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>
            <li>
                <div class="pic">
                    <img src="images/pic1.png">
                </div>
                <div class="pro-title">
                    Think PHP 5.0 博客系统实战项目演练
                </div>
                <p>
                    <span>高级</span> • 1125人在学习
                </p>
            </li>

        </ul>
    </div>
</div>


<!-- 语义化标签footer 页面底部 -->
<footer>
    <div class="w">
        <!--        左边-->
        <div class="footer-l">
            <img src="images/logo.png" height="42" width="195" alt="">
            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                © 2019年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            <a href="#" id="">下载APP</a>
        </div>
        <!--        左边-->
        <div class="footer-r">
            <dl>
                <dt>关于学成网</dt>
                <dd>关于</dd>
                <dd>管理团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>帮助</dd>
            </dl>
            <dl>
                <dt>关于学成网</dt>
                <dd>关于</dd>
                <dd>管理团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>帮助</dd>
            </dl>
            <dl>
                <dt>关于学成网</dt>
                <dd>关于</dd>
                <dd>管理团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>帮助</dd>
            </dl>
        </div>
    </div>
</footer>
</body>
</html>